import React from "react";
import { CellMeta, CellTextWordWrapStyle, ColCell, GuiIcon, renderIcon, renderText, S2Options, TableColCell, TargetCellInfo, ThemeCfg } from '@antv/s2';
import { FIELD_TYPE_MAP } from '@/constant/icons';
import { Descriptions, message, Tooltip } from 'antd';

export const ColCellTooltip = ({ meta }) => {

    return <Descriptions bordered column={1} size='small'>
        <Descriptions.Item label="字段名称">
            <span>{meta?.value}</span>
        </Descriptions.Item>
        <Descriptions.Item label="字段类型">
            <span>{FIELD_TYPE_MAP?.[meta?.extra?.columnType]?.icon} {meta?.extra?.columnType ?? '-'}</span>
        </Descriptions.Item>
    </Descriptions>
}

export class CustomColCell extends ColCell {
    initCell() {
        super.initCell();
        const { x, y, width, height, extra } = this.meta;
        renderIcon(this, {
            name: extra?.columnType, // 确保已注册该图标
            x: x + width - 20, // 从右侧向左偏移20px
            y: y + height - 20,// 从底部向上偏移20px
            width: 16,
            height: 16,
            fill: FIELD_TYPE_MAP[extra?.columnType]?.color,       // 直接控制颜色
        });
    }

}

export const customSVGIcons = Object.keys(FIELD_TYPE_MAP).map(key => {
    return {
        name: key,
        src: FIELD_TYPE_MAP[key]?.iconString
    }
})